<template>
  <div>
    <el-dialog
      :title="'策略详情'"
      class="addDialog"
      :visible.sync="detailVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="55%"
    >
      <el-form
        ref="addform"
        :model="vpnform"
        :rules="rulesVpnform"
        label-width="110px"
      >
        <el-form-item label="决策点名称:" prop="decisionPointId">
          <el-select
            v-model="vpnform.decisionPointId"
            @change="getStrategyList"
            disabled
          >
            <el-option
              v-for="item in decisionPointList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信任类型:" prop="trustType">
          <el-select
            v-model="vpnform.trustType"
            @change="handleChange"
            multiple
            disabled
          >
            <el-option
              v-for="item in xinrenList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属资源名称" prop="resourceName">
          <el-input
            v-model="vpnform.resourceName"
            autocomplete="off"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="策略下发地址:" prop="policyUrl">
          <el-input
            v-model="vpnform.policyUrl"
            autocomplete="off"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item> -->
      </el-form>
      <div v-if="vpnform.trustType && vpnform.trustType.length > 0">
        <HTable
          ref="table"
          :tableData="tableData"
          :columnConfigs="columnConfigs1"
          :selectable="false"
          :pageflag="false"
          :height="475"
          v-loading="loading"
          :pages="pagination"
          @page-change="handlePageChange"
          @size-change="handleSizeChange"
        >
          <template slot-scope="{ row }">
            <template v-if="row.name == 'strategy'">
              <el-select
                v-model="row.row.strategy"
                disabled
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in strategyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <template v-else-if="row.name == 'label1level'">
              {{ $getOptionLabel(row.row.label1level, trustLevelList) }}
            </template>
          </template>
        </HTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">返 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import {
  getList,
  listStrategy,
  getPolicyTrust,
  addList,
  editList,
} from "@/api/yybl/decision";
import { mapState, mapActions } from "vuex";
export default {
  name: "rule",
  components: {},
  mixins: [table],
  props: {
    detailVisible: {
      type: Boolean,
      default: false,
    },
    editFlag: {
      type: Boolean,
      default: false,
    },
    detailFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columnConfigs,
      vpnform: {},
      rulesVpnform: {
        host: [
          { required: true, message: "请输入资源地址", trigger: "blur" },
          //   { validator: validateIpPort, trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        content: [
          { required: true, message: "请选择决策点名称", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
      },
      strategyList: [],
    };
  },
  watch: {},
  computed: {
    ...mapState("common", [
      "xinrenList",
      "decisionPointList",
      "trustLevelList",
    ]),
    columnConfigs1() {
      return this.columnConfigs.filter(
        (i) => i.index == 4 || this.vpnform.trustType.includes(i.index)
      );
    },
  },
  methods: {
    ...mapActions("common", ["getdecisionPointList"]),
    async getStrategyList(decisionPointId) {
      console.log(decisionPointId, "kkkkkkkkkkkkkkk");
      try {
        let params = {
          decisionPointId,
        };
        const res = await listStrategy(params);
        if (res && res.rescode === 200) {
          this.strategyList = res.data.dataList.map((i) => ({
            value: i.id,
            label: i.policyName,
          }));
          this.tableData.forEach((i) => {
            i.strategy = "";
          });
        } else {
          this.strategyList.splice(0);
        }
      } catch (error) {
        this.strategyList.splice(0);
      }
    },
    async getPolicyTrust(decisionPointId) {
      try {
        let params = {
          decisionPointId,
        };
        const res = await getPolicyTrust(params);
        if (res && res.rescode === 200) {
          console.log(res);
          const resdata = res.data.dataList[0].policy;
          if (resdata) {
            const data1 = resdata.map((i) => {
              const list = i.trustAttr;
              let mapobjs = {
                用户: "label1level",
              };
              let obj = {};
              list.forEach((j) => {
                obj[mapobjs[j.trustType]] = j.trustLevel;
              });
              return {
                label1level: obj.label1level,
                strategy: i.policyId,
              };
            });
            console.log(data1, this.tableData);
            this.tableData.forEach((i) => {
              console.log(
                data1.findIndex((j) => j.label1level == i.label1level)
              );
              if (
                data1.findIndex((j) => j.label1level == i.label1level) != -1
              ) {
                i.strategy =
                  data1[
                    data1.findIndex((j) => j.label1level == i.label1level)
                  ].strategy;
              }
            });
          } else {
            this.tableData = [];
          }
        } else {
          // this.strategyList.splice(0);
        }
      } catch (error) {
        // this.strategyList.splice(0);
      }
    },
    handleChange(val) {
      console.log(val);
      const arr = this.xinrenList
        .map((i) => {
          if (val.includes(i.value)) {
            return i;
          } else {
            return undefined;
          }
        })
        .filter((j) => j);
      let list = ["1", "2", "3"]; // [1,2,3]["高", "中", "低"]
      let res = [];
      let res1 = [];
      let res2 = [];
      let result = [];
      if (arr.length == 1) {
        for (let i = 0; i < list.length; i++) {
          const el = list[i];
          let obj = { ...arr[0] };
          obj[`label${arr[0].value}level`] = el;
          res.push(obj);
        }
        result = [...res];
      } else if (arr.length == 2) {
        for (let i = 0; i < list.length; i++) {
          const el = list[i];
          let obj = { ...arr[0] };
          obj[`label${arr[0].value}level`] = el;
          res.push(obj);
          let obj1 = { ...arr[1] };
          obj1[`label${arr[1].value}level`] = el;
          res1.push(obj1);
        }
        for (let index = 0; index < res.length; index++) {
          const element = res[index];
          for (let i = 0; i < res1.length; i++) {
            const el = res1[i];
            result.push({
              ...element,
              ...el,
            });
          }
        }
      } else if (arr.length == 3) {
        for (let i = 0; i < list.length; i++) {
          const el = list[i];
          let obj = { ...arr[0] };
          obj[`label${arr[0].value}level`] = el;
          res.push(obj);
          let obj1 = { ...arr[1] };
          obj1[`label${arr[1].value}level`] = el;
          res1.push(obj1);
          let obj2 = { ...arr[2] };
          obj2[`label${arr[2].value}level`] = el;
          res2.push(obj2);
        }
        for (let index = 0; index < res.length; index++) {
          const element = res[index];
          for (let i = 0; i < res1.length; i++) {
            const el = res1[i];
            for (let j = 0; j < res2.length; j++) {
              const e2 = res2[j];
              result.push({
                ...element,
                ...el,
                ...e2,
              });
            }
          }
        }
      } else {
        result = [];
      }
      result = result.map((i) => {
        delete i.value;
        delete i.label;
        return {
          ...i,
          strategy: "",
        };
      });
      this.tableData = result;
    },
    async seedetail(row) {
      const { resourceName, decisionPointId, policyUrl, trustType, id } = row;
      this.vpnform = {
        id,
        decisionPointId: decisionPointId,
        trustType: ["1"],
        resourceName,
        policyUrl,
      };
      this.handleChange(this.vpnform.trustType);
      await this.getStrategyList(decisionPointId);
      this.getPolicyTrust(decisionPointId);
      this.$refs?.addform?.clearValidate();
    },
    handleClose() {
      this.$emit("update:detailVisible", false);
    },
    refresh() {
      this.getlists(getList, {});
    },
  },
  created() {
    // this.refresh();
    // this.getdecisionPointList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.celuebiao {
  // display: flex;
  padding: 10px;
  border: 1px solid #e8e8e8;
  width: 100%;
  ul {
    list-style: none;
    display: flex;
    width: 100%;
    li {
      flex: 17%;
    }
    li:last-child {
      flex: 49%;
    }
  }
}
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
.trustTypeDialog {
  ::v-deep .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }
}

::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.addDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    .el-form-item.slider {
      width: 100%;
    }
    ::v-deep.range {
      width: 100%;
      .el-form-item__content {
        display: flex;
        .timepicker {
          width: 100%;
        }
      }
    }
  }
}

::v-deep .el-drawer {
  min-width: 700px;
  .el-drawer__body {
    padding: 0 15px;
  }
  .demo-drawer__footer {
    margin-top: 16px;
    text-align: end;
  }
}
</style>
